import React, { useRef } from 'react';
import { PlusOutlined, EllipsisOutlined } from '@ant-design/icons';
import { Button, Tag, Space, Menu, Dropdown, Table, message } from 'antd';
import type { ProColumns, ActionType } from '@ant-design/pro-table';
import ProTable, { TableDropdown } from '@ant-design/pro-table';
import request from 'umi-request';

import { getGoods, delGoods } from '@/api/goods';

import AddGoods from './components/AddGoods';
import UpdateGoods from './components/UpdateGoods';

type GithubIssueItem = {
  url: string;
  id: number;
  number: number;
  title: string;
  labels: {
    name: string;
    color: string;
  }[];
  state: string;
  comments: number;
  created_at: string;
  updated_at: string;
  closed_at?: string;
};

const columns: ProColumns<GithubIssueItem>[] = [
  {
    title: '图片',
    dataIndex: 'photo',
    width: 150,
    search: false,
    render: (val) => {
      return <img src={val as string} alt="" style={{ width: '100%' }} />;
    },
  },
  {
    title: '商品名称',
    dataIndex: 'name',
    width: 200,
    render: (_) => _,
  },
  {
    title: '商品类型',
    dataIndex: 'gname',
    search: {
      transform: (value) => {
        return value;
      },
    },
  },
  {
    title: '状态',
    dataIndex: 'status',
    render: (value) => {
      return value ? '上架' : '未上架';
    },
    search: {
      transform: (value) => {
        return value ? '上架' : '未上架';
      },
    },
  },
  {
    title: '价格',
    dataIndex: 'price',
    search: false,
    render: (_) => _,
  },
  {
    title: '数量',
    dataIndex: 'counts',
    search: false,
    render: (_) => _,
  },
  {
    title: '点赞数',
    dataIndex: 'likes',
    search: false,
    render: (_) => _,
  },
  {
    title: '描述',
    dataIndex: '',
    search: false,
    render: (_) => _,
  },
  {
    title: '操作',
    valueType: 'option',
    render: (text, record, _, action) => {
      const reload = () => {
        action?.reload();
      };

      return <UpdateGoods reload={reload} goods={record}></UpdateGoods>;
    },
  },
];

const menu = (
  <Menu>
    <Menu.Item key="1">1st item</Menu.Item>
    <Menu.Item key="2">2nd item</Menu.Item>
    <Menu.Item key="3">3rd item</Menu.Item>
  </Menu>
);

export default () => {
  const actionRef = useRef<ActionType>();

  const reload = () => {
    actionRef.current?.reload();
  };

  const del = async (id: string) => {
    const res = await delGoods(id);
    if (res.status == 200) {
      message.success('删除成功');
      actionRef.current?.reload();
    } else {
      message.error('删除失败');
    }
  };
  const delAll = (a: any) => {
    let arr = a.selectedRowKeys;
    for (let i = 0; i < arr.length; i++) {
      del(arr[i]);
    }
  };
  return (
    <ProTable<GithubIssueItem>
      columns={columns}
      actionRef={actionRef}
      rowSelection={{}}
      request={async (params = {}, sort, filter) => {
        const res = await getGoods('' as any);
        return {
          data: res.data.rows,
          success: true,
        };
      }}
      editable={{
        type: 'multiple',
      }}
      columnsState={{
        persistenceKey: 'pro-table-singe-demos',
        persistenceType: 'localStorage',
      }}
      rowKey="id"
      search={{
        labelWidth: 'auto',
      }}
      form={{
        // 由于配置了 transform，提交的参与与定义的不同这里需要转化一下
        syncToUrl: (values, type) => {
          if (type === 'get') {
            return {
              ...values,
              created_at: [values.startTime, values.endTime],
            };
          }
          return values;
        },
      }}
      dateFormatter="string"
      headerTitle={<AddGoods reload={reload}></AddGoods>}
      toolBarRender={() => [
        <Dropdown key="menu" overlay={menu}>
          <Button>
            <EllipsisOutlined />
          </Button>
        </Dropdown>,
      ]}
      tableAlertOptionRender={(a) => {
        return (
          <Space size={16}>
            <Button onClick={() => delAll(a)}>批量删除</Button>
          </Space>
        );
      }}
    />
  );
};
